<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import { addPlayerToGameGroup, getGameNotGroupUsers } from '@/api/game';
  import { Message } from '@arco-design/web-vue';
  import { User } from '@/types/user';

  const props = defineProps<{
    gameId: string;
    groupId: string;
  }>();

  const emit = defineEmits(['close']);

  const visible = ref(false);

  const searchStr = ref('');

  const notGroupUsers = ref<User[]>([]);

  const groupUsers = computed(() => {
    if (!searchStr.value) return notGroupUsers.value;

    return notGroupUsers.value.filter((item) => {
      return (
        item.nickname.toLowerCase().indexOf(searchStr.value.toLowerCase()) >= 0
      );
    });
  });

  const selectedUserId = ref('');
  const saving = ref(false);

  const handleSubmit = async () => {
    if (selectedUserId.value) {
      saving.value = true;
      try {
        await addPlayerToGameGroup({
          userIds: [selectedUserId.value],
          gameId: props.gameId,
          groupId: props.groupId,
        });
        Message.success('操作成功');
        visible.value = false;
        emit('close', true);
      } finally {
        saving.value = false;
      }
    } else {
      Message.warning('请选择球员');
    }
  };

  watch([visible], async () => {
    if (visible.value) {
      selectedUserId.value = '';
      try {
        const res = await getGameNotGroupUsers(props.gameId);
        notGroupUsers.value = res.data.data || [];
      } finally {
        // do nothing
      }
    }
  });
</script>

<template>
  <a-popover v-model:popup-visible="visible" trigger="click" position="bottom">
    <a-link>添加</a-link>
    <template #content>
      <div class="main">
        <a-input v-model="searchStr" placeholder="搜索姓名" />
        <div v-if="groupUsers.length === 0">
          <a-empty />
        </div>
        <div class="list">
          <div
            v-for="player in groupUsers"
            :key="player.id"
            class="item"
            @click="selectedUserId = player.id"
          >
            <div>
              <a-checkbox :model-value="selectedUserId === player.id" />
            </div>
            <div>
              <div>{{ player.nickname }}</div>
              <div>{{ player.phone }}</div>
            </div>
          </div>
        </div>
        <div class="footer">
          <a-space>
            <a-button size="small" @click="visible = false">取消</a-button>
            <a-button
              size="small"
              type="primary"
              :loading="saving"
              @click="handleSubmit"
            >
              确定
            </a-button>
          </a-space>
        </div>
      </div>
    </template>
  </a-popover>
</template>

<style lang="less" scoped>
  .main {
    width: 240px;
  }

  .list {
    max-height: 300px;
    overflow: auto;
    margin: 12px -16px 0;
    border-top: 1px solid rgb(var(--gray-2));
  }

  .item {
    padding: 5px 16px;
    cursor: pointer;
    line-height: 20px;
    display: flex;
    align-items: center;
    &:hover {
      background: rgb(var(--gray-1));
    }
    & > div:last-child {
      margin-left: 10px;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .footer {
    margin: 0 -16px;
    padding-right: 16px;
    border-top: 1px solid rgb(var(--gray-2));
    padding-top: 12px;
    text-align: right;
  }
</style>
